<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core" xmlns:c="http://java.sun.com/jsp/jstl/core">

    <ui:composition template="layout.xhtml">
        <ui:define name="body">
            <script>
                function title() {
                    document.getElementById('prontuario').className='selected';
                }
                window.onload=title;
            </script>
            <style>
                .ui-accordion .ui-accordion-header .ui-icon{
                    display: block;
                }
            </style>
            <h:form id="showRecordsForm" enctype="multipart/form-data">
                <p:messages showDetail="true" autoUpdate="true"  /> 
                <h1 class="title">
                    <a href="#" class="back" onclick="history.go(-1)"/>
                    Prontuário Individual
                </h1>
                <div class="row">
                    <div class="twelve columns"> 
                        <div class="container_24 clearfix ">
                            <div class="grid_12">
                                <fieldset>
                                    <legend> <h4 style="margin:0 0 10px 0">Paciente</h4></legend>
                                    <p:panel toggleable="true"  style="background: none; border: none;" 
                                             styleClass="grid_22">
                                        <div class="grid_23" style="text-align: center;">
                                            <h4><h:outputText  value="#{managerSearchRecords.customer.gender eq 'MASCULINO' ? 'Sr. ':'Sra. '}#{managerSearchRecords.customer.name}#{managerRecords.age ne '0' ? ' - ' : ''}#{managerRecords.age ne '0' ? managerRecords.age : ''}#{managerRecords.age ne '0' ? ' Anos' : ''}"/></h4>
                                            <div class="clear"/>
                                        </div>
                                        <div class="grid_11" style="text-align: center;">
                                            <p:lightBox >
                                                <h:outputLink  
                                                    value="#{managerSearchRecords.customer.annex.id eq null ? '':'show/?annex='}#{managerSearchRecords.customer.annex.id eq null ? 'assets/images/avatar.jpg': managerSearchRecords.customer.annex.id}" 
                                                    title="#{managerSearchRecords.customer.name}"  target="_blank" >
                                                    <p:graphicImage id="avatar1" styleClass="image grid_3" 
                                                                    style="width: 150px;" alt="#{managerSearchRecords.customer.annex.id}" title="#{managerSearchRecords.customer.annex.id}"
                                                                    url="#{managerSearchRecords.customer.annex.id eq null ? '':'show/?annex='}#{managerSearchRecords.customer.annex.id eq null ? 'assets/images/avatar.jpg': managerSearchRecords.customer.annex.id}" />
                                                </h:outputLink>
                                            </p:lightBox>

                                        </div>
                                        <div class="grid_12">
                                            <p:outputLabel value="Estado Civil:" styleClass="grid_11"/>
                                            <h:outputText styleClass="grid_12" value="#{managerSearchRecords.customer.civilStatus.name}"/>
                                            <div class="clear"></div>
                                            <p:outputLabel value="E-mail:" styleClass="grid_11"/>
                                            <h:outputText styleClass="grid_12" value="#{managerSearchRecords.customer.email}"/>
                                            <div class="clear"></div>
                                            <p:outputLabel value="Telefone:" styleClass="grid_11"/>
                                            <h:outputText styleClass="grid_12" value="#{managerSearchRecords.customer.phone}"/>
                                            <div class="clear"></div>
                                            <p:outputLabel value="Celular:" styleClass="grid_11"/>
                                            <h:outputText styleClass="grid_12" value="#{managerSearchRecords.customer.cellular}"/>
                                        </div>

                                    </p:panel>  
                                </fieldset>
                            </div>
                            <div class="grid_11">
                                <fieldset>
                                    <legend> <h4 style="margin:0 0 10px 0">Informações Gerais</h4></legend>
                                    <p:panel id="info" style="background: none; border: none;" 
                                             styleClass="grid_23" rendered="#{managerSearchRecords.lastRecords != null}">
                                        <p:outputLabel value="Último Procedimento:" styleClass="grid_10"/>
                                        <h:outputText styleClass="grid_13" value="#{managerSearchRecords.lastDiary.procedure eq null ? ' - ':managerSearchRecords.lastDiary.procedure.name}"/>
                                        <div class="clear"></div>
                                        <p:outputLabel value="Data:" styleClass="grid_10"/>
                                        <h:outputText styleClass="grid_13" value="#{managerSearchRecords.lastDiary.startTime eq null ? ' - ':managerSearchRecords.lastDiary.startTime}">
                                            <f:convertDateTime pattern="dd/MM/yyyy HH:mm:ss" />
                                        </h:outputText>
                                        <div class="clear"></div>
                                        <p:outputLabel value="Responsável:" styleClass="grid_10"/>
                                        <h:outputText styleClass="grid_13" value="#{managerSearchRecords.lastDiary.doctor eq null ? ' - ':managerSearchRecords.lastDiary.doctor.name}"/>
                                        <div class="clear"></div>
                                        <p:outputLabel value="Último Diagnóstico:" styleClass="grid_10"/>
                                        <h:outputText styleClass="grid_13" value="#{managerSearchRecords.lastRecords eq null ? '-':(managerSearchRecords.lastRecords.diagnostic eq null ? '-':managerSearchRecords.lastRecords.diagnostic.cid)}"/>


                                        <p:commandButton value="Imprimir" icon="ui-icon-print" 
                                                         ajax="false"  update="@form" process="@form"  immediate="true"
                                                         onclick="this.form.target='_blank'"
                                                         styleClass="right" actionListener="#{managerSearchRecords.reportRecords()}"/>
                                    </p:panel>
                                </fieldset>
                            </div>
                            <div class="clear"></div>
                            <div class="grid_23">
                                <fieldset>
                                    <legend> <h4 style="margin:0 0 10px 0">Novo</h4></legend>
                                    <p:panel id="panelNewRecords" style="background: none; border: none;" 
                                             styleClass="grid_23">

                                        <p:outputLabel value="Procedimento:" rendered="#{managerLayout.getDoctorByLogin()}" styleClass="grid_4" />
                                        <p:autoComplete value="#{managerSearchRecords.procedureNewRecords}" rendered="#{managerLayout.getDoctorByLogin()}"
                                                        required="true"
                                                        requiredMessage="Procedimento é obrigatório"
                                                        id="selectProcedure" panelStyle="max-height: 200px;"  
                                                        completeMethod="#{managerProcedure.autocomplete}"  
                                                        var="p" itemLabel="#{p.name}" itemValue="#{p}" forceSelection="true"
                                                        styleClass="grid_15" dropdown="true" 
                                                        converter="#{autocompleteconverter}" >
                                            <p:ajax event="itemSelect" update=":showRecordsForm:panelNewRecords" process=":showRecordsForm:panelNewRecords"/>
                                        </p:autoComplete>
                                        <p:button icon="ui-icon-plusthick" rendered="#{managerLayout.getDoctorByLogin()}"
                                                  value="Novo" outcome="createRecords" disabled="#{managerSearchRecords.procedureNewRecords.id eq null}"
                                                  styleClass="grid_3 ui-priority-primary right clearfix">
                                            <f:param name="c" value="#{managerSearchRecords.customer.id}" />
                                            <f:param name="p" value="#{managerSearchRecords.procedureNewRecords.id}" />
                                            <f:param name="d" value="#{managerLayout.doctor.id}" />
                                        </p:button>
                                    </p:panel>

                                </fieldset>
                            </div>
                            <div class="grid_23">
                                <fieldset>
                                    <legend> <h4 style="margin:0 0 10px 0">Prontuário</h4></legend>
                                    <h:outputText rendered="#{empty managerSearchRecords.recordses }" value="Não há histórico clínico" />

                                    <p:accordionPanel value="#{managerSearchRecords.recordses}" var="r" styleClass="container_24 clearfix">  
                                        <p:tab  >

                                            <f:facet name="title">
                                                <div class="grid_23 clearfix">
                                                    <h:outputText styleClass="grid_6" value="#{r.createAt}">
                                                        <f:convertDateTime pattern="dd/MM/yyyy à's' HH:mm:ss"/>
                                                    </h:outputText>
                                                    <h:outputText value="#{r.procedure.name.concat((r.doctor ne null ? ' - ' : ''))
                                                                           .concat((r.doctor ne null ? r.doctor.name : ''))}" styleClass="grid_13"/>
                                                    <p:button icon="ui-icon-arrowreturnthick-1-w" 
                                                              value="Retorno" outcome="createRecords"
                                                              styleClass="grid_3 right">
                                                        <f:param name="c" value="#{r.customer.id}" />
                                                        <f:param name="r" value="#{r.id}" />
                                                        <f:param name="p" value="#{r.procedure eq null ? null : r.procedure.id}" />
                                                        <f:param name="d" value="#{r.doctor eq null ? null : r.doctor.id}" />
                                                    </p:button>
                                                </div>
                                                <div class="clear"></div>
                                            </f:facet>
                                            <div class="grid_3">
                                                <p class="date">
                                                    <a href="#">
                                                        <h:outputText value="#{r.createAt}">
                                                            <f:convertDateTime pattern="MMMMM" />
                                                        </h:outputText>
                                                        <b>
                                                            <h:outputText value="#{r.createAt}">
                                                                <f:convertDateTime pattern="dd"/>
                                                            </h:outputText>

                                                        </b>
                                                        <span>
                                                            <h:outputText value="#{r.createAt}">
                                                                <f:convertDateTime pattern="yyyy"/>
                                                            </h:outputText>
                                                        </span>
                                                    </a>
                                                </p>
                                            </div>
                                            <div class="grid_20" >
                                                <h4 style="color: #5593CA;">Anamnese</h4>

                                                <ui:repeat value="#{r.anamneses}" var="ra">
                                                    <p:outputLabel value="Queixa Principal" styleClass="grid_5"/>
                                                    <p:inputText styleClass="grid_18" readonly="true" value="#{ra.chiefComplaint}"/>
                                                    <div class="clear"/>
                                                    <p:outputLabel value="História" styleClass="grid_5"/>
                                                    <div class="grid_18">
                                                        <p:inputTextarea readonly="true" value="#{ra.descr}"/>
                                                    </div>
                                                </ui:repeat>
                                                <p:outputLabel value="Queixa Principal" styleClass="grid_5" rendered="#{empty r.anamneses}"/>
                                                <p:inputText styleClass="grid_18" readonly="true" rendered="#{empty r.anamneses}"/>
                                                <div class="clear"/>
                                                <p:outputLabel value="História" styleClass="grid_5" rendered="#{empty r.anamneses}"/>
                                                <div class="grid_18">
                                                    <p:inputTextarea readonly="true" rendered="#{empty r.anamneses}"/>
                                                </div>

                                                <div class="clear"/>
                                                <hr/>
                                                <h4 style="color: #5593CA;">Exame Físico</h4>

                                                <div class="clear"/>
                                                <p:outputLabel value="Altura" styleClass="grid_5"/>
                                                <p:inputText styleClass="grid_4" readonly="true" value="#{r.physicalExamination.height}"/>
                                                <p:outputLabel value="m" styleClass="grid_1"/>
                                                <p:outputLabel value="Peso" styleClass="grid_5"/>
                                                <p:inputText styleClass="grid_4" readonly="true" value="#{r.physicalExamination.weight}"/>
                                                <p:outputLabel value="kg" styleClass="grid_1"/>
                                                <div class="clear"/>
                                                <p:outputLabel value="Batimento Cardíaco" styleClass="grid_5"/>
                                                <p:inputText styleClass="grid_4" readonly="true" value="#{r.physicalExamination.heartRate}"/>
                                                <p:outputLabel value="bpm" styleClass="grid_1"/>
                                                <div class="clear"/>
                                                <p:outputLabel value="Pressão arterial sistólica" styleClass="grid_5"/>
                                                <p:inputText styleClass="grid_4" readonly="true" value="#{r.physicalExamination.systolicPressure}"/>
                                                <p:outputLabel value="mmHg" styleClass="grid_1"/>
                                                <p:outputLabel value="Pressão arterial Diastólica" styleClass="grid_5"/>
                                                <p:inputText styleClass="grid_4" readonly="true" value="#{r.physicalExamination.diastolicPressure}"/>
                                                <p:outputLabel value="mmHg" styleClass="grid_1"/>
                                                <div class="clear"/>
                                                <p:outputLabel value="Observações" styleClass="grid_5"/>
                                                <div class="grid_19">
                                                    <p:inputTextarea readonly="true" value="#{r.physicalExamination.descr}"/>
                                                </div>
                                                <div class="clear"/>
                                                <hr/>
                                                <h4 style="color: #5593CA;">Diagnóstico</h4>

                                                <p:outputLabel value="Diagnóstico" styleClass="grid_5"/>
                                                <p:inputText styleClass="grid_18" readonly="true" value="#{r.diagnostic.cid}"/>
                                                <div class="clear"/>
                                                <p:outputLabel value="Conduta" styleClass="grid_5"/>
                                                <div class="grid_18">
                                                    <p:inputTextarea readonly="true" value="#{r.diagnostic.descr}"/>
                                                </div>
                                                <div class="clear"/>
                                                <hr/>
                                                <h4 style="color: #5593CA;">Receituário</h4>
                                                <p:outputLabel value="Descrição" styleClass="grid_5"/>
                                                <div class="grid_18">
                                                    <p:inputTextarea readonly="true" value="#{r.prescription}"/>
                                                </div>
                                                <div class="clear"/>
                                                <hr/>
                                                <h4 style="color: #5593CA;">Evolução/Retorno</h4>


                                                <ui:repeat value="#{r.evolutions}" var="ev">

                                                    <div class="grid_3">
                                                        <p class="date">
                                                            <a href="#">
                                                                <h:outputText value="#{ev.dateEvolution}">
                                                                    <f:convertDateTime pattern="MMMMM" />
                                                                </h:outputText>
                                                                <b>
                                                                    <h:outputText value="#{ev.dateEvolution}">
                                                                        <f:convertDateTime pattern="dd"/>
                                                                    </h:outputText>

                                                                </b>
                                                                <span>
                                                                    <h:outputText value="#{ev.dateEvolution}">
                                                                        <f:convertDateTime pattern="yyyy"/>
                                                                    </h:outputText>
                                                                </span>
                                                            </a>
                                                        </p>
                                                    </div>
                                                    <div class="grid_21">
                                                        <p:outputLabel value="Data:" styleClass="grid_3"/>
                                                        <p:calendar showOn="button" styleClass="grid_8" 
                                                                    value="#{ev.dateEvolution}"
                                                                    pattern="dd/MM/yyyy" required="true"/>
                                                        <div class="clear"/>
                                                        <p:outputLabel value="Descrição" styleClass="grid_3"/>
                                                        <div class="grid_18">
                                                            <p:inputTextarea readonly="true" value="#{ev.descr}"/>
                                                        </div> 
                                                        <div class="clear"/>
                                                    </div>
                                                    <div class="clear"/>
                                                </ui:repeat>


                                                <div class="clear"/>
                                                <hr/>
                                                <h4 style="color: #5593CA;">Anexos</h4>

                                                <div class="container_24 clearfix">
                                                    <ui:repeat  value="#{r.annexs}" var="a">
                                                        <div class="grid_5">
                                                            <h:outputLink  
                                                                value="#{a.type ne 'application/pdf' ? 'viewImage.xhtml':'show'}" 
                                                                title="#{a.description}"  target="_blank" >

                                                                <div style="text-align: center; width: 20%;" class="grid_4">

                                                                    <p:graphicImage styleClass="image grid_3" rendered="#{a.type ne 'application/pdf'}"
                                                                                    style="margin-left:1%; width: 100px;"
                                                                                    url="show/?annex=#{a.id}" />

                                                                    <p:outputLabel  value="#{a.description.length() ge 10 ? a.description.substring(0, 10).concat('...') : 
                                                                                             a.description.replace('.png','').replace(' ','_')}" 
                                                                                    style="margin-left:1%; width: 100px;" rendered="#{a.type ne 'application/pdf'}"/>

                                                                    <p:graphicImage styleClass="image grid_3" rendered="#{a.type eq 'application/pdf'}"
                                                                                    style="margin-left:1%; width: 100px;" 
                                                                                    url="assets/images/pdf.jpeg" />


                                                                    <p:outputLabel  value="#{a.description.length() ge 10 ? a.description.substring(0, 10).concat('...') : 
                                                                                             a.description.replace('.pdf','').replace(' ','_')}" 
                                                                                    style="margin-left:1%; width: 100px;" rendered="#{a.type eq 'application/pdf'}"/>


                                                                </div>
                                                                <f:param name="annex" value="#{a.id}"/>
                                                            </h:outputLink>
                                                        </div>
                                                        <div class="grid_18">
                                                            <p:outputLabel value="Laudo" styleClass="left"/>
                                                            <div class="clear"/>
                                                            <div class="grid_23">
                                                                <p:inputTextarea value="#{a.laudo}" />
                                                            </div> 
                                                        </div> 
                                                        <div class="clear"/>

                                                    </ui:repeat>
                                                </div>
                                                <div class="clear"/>
                                                <hr/>
                                            </div>
                                        </p:tab>
                                    </p:accordionPanel>
                                </fieldset>
                            </div>
                        </div>
                        <div class="buttonAction">
                            <p:button value="Voltar"  icon="ui-icon-arrowreturnthick-1-w"  href="searchRecords.xhtml"/>
                        </div >
                    </div>
                </div>
            </h:form>
        </ui:define>
    </ui:composition>

</html>
